<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
  </head>

  <body>
    <div id="app">
      <div class="p-5">
        <div class="mb-3">
          <label class="form-label">用户名</label>
          <input
            v-model="form.username"
            type="text"
            class="form-control"
            :class="{'is-valid':(validForm.username===''?false:validForm.username),'is-invalid':(validForm.username===''?false:!validForm.username)}"
          />
          <span class="invalid-feedback">用户名3-18位</span>
        </div>

        <div class="mb-3">
          <label class="form-label">密码</label>
          <input
            v-model="form.password"
            type="text"
            class="form-control"
            :class="{'is-valid':(validForm.password===''?false:validForm.password),'is-invalid':(validForm.password===''?false:!validForm.password)}"
          />
          <span class="invalid-feedback">密码6-18位</span>
        </div>
        <div class="mb-3">
          <label class="form-label">确认密码</label>
          <input
            v-model="form.cpassword"
            type="text"
            class="form-control"
            :class="{'is-valid':(validForm.cpassword===''?false:validForm.cpassword),'is-invalid':(validForm.cpassword===''?false:!validForm.cpassword)}"
          />
          <span class="invalid-feedback">两次密码输入不一致</span>
        </div>

        <div class="mb-3">
          <label class="form-label">邮箱</label>
          <input
            v-model="form.email"
            type="text"
            class="form-control"
            :class="{'is-valid':(validForm.email===''?false:validForm.email),'is-invalid':(validForm.email===''?false:!validForm.email)}"
          />
          <span class="invalid-feedback">邮箱格式错误</span>
        </div>
        <div class="mb-3">
          <label class="form-label">手机</label>
          <input
            v-model="form.phone"
            type="text"
            class="form-control"
            :class="{'is-valid':(validForm.phone===''?false:validForm.phone),'is-invalid':(validForm.phone===''?false:!validForm.phone)}"
          />
          <span class="invalid-feedback">手机格式错误</span>
        </div>
        <div class="mb-3">
          <button class="btn btn-primary" @click="save">保存</button>
        </div>
      </div>
    </div>
    <script type="module">
      import {
        createApp,
        ref,
        reactive,
        computed,
        watch,
      } from "./vue.esm-browser.js";

      const app = createApp({
        setup() {
          const form = ref({
            username: "",
            email: "",
            phone: "",
            password: "",
            cpassword: "",
          });

          const validForm = ref({
            username: "",
            email: "",
            phone: "",
            password: "",
            cpassword: "",
          });

          watch(
            () => form.value.username,
            () => {
              validForm.value.username = /^\w{2,18}$/.test(form.value.username);
            }
          );

          watch(
            () => form.value.email,
            () => {
              const emailV =
                /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                  form.value.email
                );
              validForm.value.email = emailV;
            }
          );

          function save() {
            /* // 验证用户
            const usernameV = /^\w{2,18}$/.test(form.value.username);
            validForm.value.username = usernameV;
            // 验证密码
            const passwordV = /^\w{6,18}$/.test(form.value.password);
            validForm.value.password = passwordV;

            // 确认
            const cpasswordV = form.value.cpassword === form.value.password;
            validForm.value.cpassword = cpasswordV;

            // 验证邮箱
            const emailV =
              /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                form.value.email
              );
            validForm.value.email = emailV;

            // 验证手机
            const phoneV = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(
              form.value.phone
            );
            validForm.value.phone = phoneV;

            if (usernameV && emailV && phoneV) {
              console.log("save succss");
            } */
          }

          return { form, save, validForm };
        },
      });

      app.mount("#app"); //挂载
    </script>
  </body>
</html>
